<template>
    <div id="goods">
        <div class="menu-wrapper" ref="menuScroll">
            <ul>
                <li v-for="(item, key) in goods" class="menu-item border-1px" :class="{'active': currentIndex === key}" @click="selectMenu(key)">
                    <span class="text">
                        <ry-class-map v-if="item.type > 0" :type="item.type" :imageType="4"></ry-class-map>
                        {{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodScroll">
            <ul>
                <li v-for="item in goods" class="food-list">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="food in item.foods" class="food-item border-1px" @click="selectFood(food)">
                            <div class="icon">
                                <img :src="food.icon" />
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p v-if="food.description" class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="sales">月售{{food.sellCount}}份</span>
                                    <span class="praise">好评率{{food.rating}}%</span>
                                </div>
                                <div class="money">
                                    <span class="price">￥{{food.price}}</span>
                                    <del v-if="food.oldPrice" class="old-price">￥{{food.oldPrice}}</del>
                                </div>
                                <div class="cartcontrol-wrapper">
                                    <ry-cart-control :food="food" @cartAdd="cartAdd($event)"></ry-cart-control>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <ry-cart :seller="seller" :selectFoods="selectFoods" ref="cart"></ry-cart>
        <ry-food :food="selectedFood" @cartAdd="cartAdd($event)" ref="food"></ry-food>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import RyClassMap from './../classMap/ClassMap'
    import RyCart from './../cart/Cart'
    import RyCartControl from './../cartcontrol/Cartcontrol'
    import RyFood from './../food/Food'

    export default {
        name: 'Goods',
        props: ['seller'],
        components: {
            RyClassMap,
            RyCart,
            RyCartControl,
            RyFood
        },
        data() {
            return {
                menuScroll: {},
                foodScroll: {},
                listHeight: [],
                scrollY: 0,
                goods: [],
                selectedFood: {}
            }
        },
        methods: {
            calculateHeight() {
                const aFoodList = this.$refs.foodScroll.getElementsByClassName('food-list');
                let height = 0;
                this.listHeight.push(height);
                for (let i = 0; i < aFoodList.length; i++) {
                    height += aFoodList[i].clientHeight;
                    this.listHeight.push(height);
                }
            },
            selectMenu(key) {
                const aFoodList = this.$refs.foodScroll.getElementsByClassName('food-list');
                const element = aFoodList[key];
                this.foodScroll.scrollToElement(element, 500);
            },
            cartAdd(target) {
                this.$refs.cart.drop(target);
            },
            selectFood(food) {
                this.selectedFood = food;
                this.$refs.food.show();
            }
        },
        computed: {
            currentIndex() {
                for (let i = 0; i < this.listHeight.length; i++) {
                    let height1 = this.listHeight[i];
                    let height2 = this.listHeight[i + 1];
                    if(this.scrollY >= height1 && this.scrollY < height2) return i;
                }
                return 0;
            },
            selectFoods() {
                let foods = [];
                this.goods.forEach(item => {
                    item.foods.forEach(food => {
                        if (food.count) foods.push(food)
                    })
                })
                return foods;
            }
        },
        created() {
            fetch('/api/goods.json').then(response => response.json()).then(response => {
                this.goods = response;

                this.$nextTick(() => {
                    this.menuScroll = new BScroll(this.$refs.menuScroll, {
                        click: true
                    })
                    this.foodScroll = new BScroll(this.$refs.foodScroll, {
                        probeType: 3,
                        click: true
                    })
                    this.foodScroll.on('scroll', (pos) => {
                        this.scrollY = Math.abs(Math.round(pos.y));
                    })
                    this.calculateHeight();
                })
            });
        }
    }
</script>

<style scoped>
    #goods {
        display: flex;
        position: absolute;
        top: 176px;
        bottom: 46px;
        width: 100%;
        overflow: hidden;
    }

    .menu-wrapper {
        flex: 0 0 80px;
        width: 80px;
        background-color: #f3f5f7;
    }

    .menu-item {
        display: flex;
        align-items: center;
        height: 54px;
        width: 100%;
        line-height: 15px;
        padding: 0 12px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
    }

    .menu-item.active {
        background-color: #fff;
        color: #333;
        font-weight: bold;
    }

    .menu-item::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .text {
        width: 56px;
        font-size: 12px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }

    .text .icon {
        display: inline-block;
        margin-right: 0;
        vertical-align: top;
    }

    .foods-wrapper {
        flex: 1;
    }

    .title {
        padding-left: 14px;
        height: 26px;
        line-height: 26px;
        border-left: 2px solid #d9dde1;
        font-size: 12px;
        color: rgb(147, 153, 159);
        background-color: #f3f5f7;
    }

    .food-item {
        display: flex;
        margin: 18px;
        padding-bottom: 18px;
        position: relative;
    }

    .food-item::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .food-item:last-child {
        margin-bottom: 0;
    }

    .food-item:last-child::after {
        display: none;
    }

    .food-item .icon {
        flex: 0 0 57px;
        margin-right: 10px;
    }

    .icon img {
        width: 57px;
        height: 57px;
    }

    .content {
        flex: 1;
    }

    .name {
        margin: 2px 0 5px;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: rgb(7, 17, 27);
        white-space: nowrap;
    }

    .desc,
    .extra {
        font-size: 10px;
        color: rgb(147, 153, 159);
    }

    .desc {
        line-height: 12px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }

    .extra {
        margin-top: 5px;
        line-height: 10px;
    }

    .price {
        font-size: 14px;
        color: rgb(240, 20, 20);
        font-weight: 700;
        line-height: 24px;
    }

    .old-price {
        font-size: 10px;
        color: rgb(147, 153, 159);
    }

    .cartcontrol-wrapper {
        position: absolute;
        right: 0;
        bottom: 12px;
    }
</style>